<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>同步文字栏</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>

        .marquee {
            width: 100%;
            height: 35px;
            line-height: 35px;
            align-items: center;
            color: #3A3A3A;
            background-color: #b3effe;
            box-sizing: border-box;
            text-align: center;
        }

        .layui-container {
            width: 100%;
            padding: 0 10px;
        }
    </style>

</head>
<body>

<div class="layui-container">
    <div class="layui-container">
        <div class="layui-row">
            <div class="marquee">
                <p style="" class="topText">
                    Hao-Tool Design By @polices on http://lymtr.cn
                </p>
            </div>
        </div>

        <div class="layui-row" id="view" style="margin:10px auto">
        </div>
        <div class="layui-row" style="margin:10px auto">
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;text-align: center">
        <legend>信息栏</legend>
    </fieldset>
    <div class="layui-row">
        <textarea id="demo" style="display: none;"></textarea>
    </div>
    <div class="layui-row layui-form " style="text-align: center;margin-top: 10px">

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="radio" name="syncType" value="1" title="编写">
                <input type="radio" name="syncType" value="2" title="更新">
                <input type="radio" name="syncType" value="0" title="禁用" checked="">
                <button type="button" class="layui-btn layui-btn-sm  layui-btn-normal btn-up">上传信息</button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-warm btn-down">下送信息</button>
            </div>
        </div>

    </div>

    <input type="hidden" th:value="${textCode}" name="textCode">

</div>
<script src="/static/layui/layui.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'layedit'], function () {
        var layer = layui.layer
        var layedit = layui.layedit;
        var form = layui.form;

        var $ = layui.$;

        var clientHeight = window.screen.availHeight;

        var index = layedit.build('demo', {
            height: clientHeight - 300
        });
        var textCode = $('[name=textCode]').val();
        $(".btn-down").on('click', function () {
            syncText();

        });
        $(".btn-up").on('click', function () {
            writeText();
        });

        setInterval(function () {
            var type = $('input:radio:checked').val();
            if (type == 1) {
                writeText();
            }
        }, 10000);

        setInterval(function () {
            var type = $('input:radio:checked').val();
            if (type == 2) {
                syncText();
            }
        }, 10000);

        function writeText() {
            var content = layedit.getContent(index);
            var data = {
                content: content,
            };
            var loadIndex = layer.load(1); //换了种风格
            $.ajax({
                url: "../rest/text/add/" + textCode,
                type: "post",
                data: data,
                dataType: "json",
                success: function (data) {
                    if (data.code == '200') {
                        console.log("新增成功");
                    }
                }
            });
            layer.close(loadIndex);
        }

        function syncText() {
            var loadIndex = layer.load(1); //换了种风格
            $.ajax({
                url: "../rest/text/sync/" + textCode,
                type: "get",
                dataType: "json",
                success: function (data) {
                    if (data.code == '200') {
                        layedit.setContent(index, data.data, false);
                        $(".topText").html(data.msg);
                    }
                }
            });
            layer.close(loadIndex);
        }

    });
</script>
</body>
</html>
